<template>
  <div class="login-box">
    <h3>登录海南残联管理系统</h3>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="loginForm"
      ref="loginForm"
    >
      <el-form-item
        label="用户名"
        prop="userName"
        :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]"
      >
        <el-input
          v-model.trim="loginForm.userName"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="密码"
        prop="passWord"
        :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
      >
        <el-input
          type="password"
          v-model.trim="loginForm.passWord"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <div class="el-form-item__content" style="margin-left: 100px">
        <button
          data-v-3a3111e3=""
          type="button"
          @click="loginSubmit"
          class="el-button el-button--primary"
        >
          <span>登录</span>
        </button>
        <button
          data-v-3a3111e3=""
          type="button"
          @click="resetForm"
          class="el-button el-button--default"
        >
          <span>重置</span>
        </button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        userName: "",
        passWord: "",
      },
      labelPosition: "top", // 标签位置
    };
  },
  methods: {
    async loginSubmit() {
      this.$router.push({ path: "/home" });
      // 表单验证
      //   const valid = await this.$refs.loginForm.validate();
      //   if (!valid) return; // 如果验证不通过，停止执行
      //   try {
      //     const { data: res } = await this.axios.post(
      //       "http://wish.byesame.com/login",
      //       this.loginForm
      //     );
      //     console.log(res);
      //     if (res.code !== 200) return console.log(res);
      //     let token = res.data.token;
      //     console.log(token);
      //     localStorage.setItem("token", token);
      //     this.$router.push({ path: "/home" });
      //   } catch (err) {
      //     console.log(err);
      //   }
    },
    resetForm() {
      // 清空输入框的内容
      this.loginForm.userName = "";
      this.loginForm.passWord = "";
      // 如果需要重置表单的验证状态，可以调用
      this.$refs.loginForm.resetFields();
    },
  },
};
</script>

<style>
.login-box {
  width: 500px;
  margin: 10% auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  padding: 15px;
  border-radius: 5px;
}
h3 {
  text-align: center;
  margin: 0;
  margin-bottom: 15px;
}
.el-form-item {
  display: flex;
  margin-bottom: 20px;
}
.el-form-item label {
  width: 100px;
  vertical-align: middle;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  text-align: right;
}
.el-input {
  width: 400px;
  margin-left: 10px;
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
.el-form-item__content {
  text-align: left;
}
</style>
